<template>
	<view class="wrap">
		<view class="cell" @click="jumpSelectAddr('/pages/addAddr/modules/selectAddr')">
			<view class="addressBox">
				<image style="width: 48rpx" mode="widthFix" src="/static/orderConfirm/location.png"></image>
				<view class="cont">
					<view class="address">{{ address.province||'暂无地址，请先点击添加地址' }}{{ address.city||'' }}{{ address.sarea||'' }}{{ address.address||'' }}</view>
					<view class="name">{{ address.sname ||'' }} {{ address.telphone  ||'' }}</view>
				</view>
			</view>
			<u-icon name="arrow-right" color="#666" size="11"></u-icon>
		</view>
		<view class="cell">
			<view class="service">
				<view class="title">
					<view class="name">装修服务</view>
					<view class="desc">{{ obj.lv_name }}</view>
				</view>
				<view class="content">
					<view class="left">
						<view class="picture">
							<image style="width: 94rpx" mode="widthFix" :src="obj.imgList && obj.imgList[0] && obj.imgList[0]"></image>
						</view>
						<view class="project">
							<view class="name">{{ obj.pro_name }}</view>
							<view class="desc">服务项目：{{ obj.item_names }}</view>
						</view>
					</view>
					<view class="price">
						￥
						<span>{{ obj.total_fee }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="cell">
			<view class="title">支付说明</view>
			<view class="payBox">
				<view class="text">装修服务费用分为两个阶段</view>
				<view class="text">
					<span>阶段一：￥{{ obj.first_fee }}</span>
					（总金额80%）
				</view>
				<view class="text">
					<span>阶段二：￥{{ obj.last_fee }}</span>
					（总金额20%）
				</view>
			</view>
		</view>
		<view class="cell" style="align-items: flex-start" @click="jump('/pages/orderConfirm/modules/remark')">
			<view class="title">订单备注</view>
			<view class="remarkBox">
				<view class="desc">{{ form.remark }}</view>
				<u-icon name="arrow-right" color="#666" size="11"></u-icon>
			</view>
		</view>
		<view class="cell">
			<view class="title">服务协议</view>
			<view class="agreement">
				<view class="desc">购买视为同意《服务协议》</view>
				<image style="width: 32rpx; height: 32rpx" mode="widthFix" src="/static/orderConfirm/select.png"></image>
			</view>
		</view>
		<div class="bottom">
			<div class="price">
				阶段一：
				<span>￥{{ obj.first_fee }}</span>
			</div>
			<div class="btn">
				<u-button type="primary" shape="circle" @click="submitOrder" text="提交订单" color="#21B579"></u-button>
			</div>
		</div>
	</view>
</template>

<script>
import wxPay from '../../utils/public.js';
export default {
	data() {
		return {
			obj: {},
			address: {},
			userInfo: {},
			form: {
				remark: ''
			}
		};
	},
	onLoad(options) {
		console.log(options);
		this.getUserInfo();
		this.saveDataoStorage(options);

		// if (options.remark) {
		// 	this.form.remark = options.remark;
		// }
		// if (options.address) {
		// 	this.address = JSON.parse(options.address)
		// }else{
		// 	this.getUserAddressList()
		// }
	},
	methods: {
		// 提交订单
		submitOrder() {
			console.log(this.obj);
			console.log(this.address);
			let that = this;
			let params = {
				userId: this.userInfo.id,
				proId: this.obj.proId,
				total: this.obj.total_fee,
				itemFees: this.obj.item_fees,
				itemNames: this.obj.item_names,
				lvFee: this.obj.lv_fee,
				lvName: this.obj.lv_name,
				addrId: this.address.id,
				remark: this.form.remark,
				openId: this.userInfo.openid
			};
			console.log(params);
			this.$api.post('/fit/submitOrder', params).then((res) => {
				console.log(res);
				let data = {
					openid: this.userInfo.openid,
					ownership: 'first',
					source: 'pro_order',
					userId: this.userInfo.id,
					outTradeNo: res.data
				};
				this.$api.post('/fit/payment', data).then((response) => {
					console.log(response, 'response');
					
					this.wxPay(response.data, { outTradeNo: res.data, ownership: '第一阶段', price: this.obj.first_fee });
				});
			});
		},
		jump(url) {
			uni.navigateTo({
				url: `${url}?remark=${this.form.remark}`
			});
		},
		jumpSelectAddr(url) {
			uni.navigateTo({
				url: `${url}?addr=${JSON.stringify(this.address)}`
			});
		},
		getUserAddressList() {
			let that = this;
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success(res) {
			// 		console.log(res.data)
			// 		// that.userInfo = res.data;

			// 	}
			// });
			that.$api.post('/fit/addressList', { phone: that.userInfo.phone }).then((res) => {
				if (res.retCode === '0000') {
					that.address = res.data[0] || {};
				}
			});
		},
		// 保存数据到storage
		saveDataoStorage(options) {
			let that = this;
			// 备注数据 保存道storage里面 提交完订单的时候删除
			if (options.remark) {
				console.log(options.remark);
				this.form.remark = options.remark;
				uni.setStorage({
					key: 'remarkInfo',
					data: options.remark
				});
			} else {
				// this.getUserAddressList()
				uni.getStorage({
					key: 'remarkInfo',
					success(res) {
						console.log(res);
						that.form.remark = res.data;
					}
				});
			}
			// 地址数据 保存道storage里面 提交完订单的时候删除
			if (options.address) {
				console.log(JSON.parse(options.address));
				this.address = JSON.parse(options.address);
				uni.setStorage({
					key: 'addressInfo',
					data: options.address
				});
			} else {
				uni.getStorage({
					key: 'addressInfo',
					success(res) {
						console.log(res);
						that.address = JSON.parse(res.data);
					},
					fail() {
						that.getUserAddressList();
					}
				});
			}
			// 订单基础数据 保存道storage里面 提交完订单的时候删除
			if (options.data) {
				console.log(JSON.parse(options.data));
				this.obj = JSON.parse(options.data);
				uni.setStorage({
					key: 'orderInfo',
					data: options.data
				});
			} else {
				uni.getStorage({
					key: 'orderInfo',
					success(res) {
						console.log(res);
						that.obj = JSON.parse(res.data);
					}
				});
			}
		},
		// 清除缓存保存的数据
		removeStorage() {
			uni.removeStorage({
				key: 'orderInfo'
			});
			uni.removeStorage({
				key: 'addressInfo'
			});
			uni.removeStorage({
				key: 'remarkInfo'
			});
		},
		// 获取用户信息数据
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
				}
			});
		},
		wxPay(data, params) {
			console.log(data);
			let that = this;
			// wxPay(data, `/pages/paySuccess/paySuccess?params=${JSON.stringify(params)}`)
			wx.requestPayment({
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data._package,
				signType: data.signType,
				paySign: data.paySign,
				success: function (res) {
					uni.redirectTo({
						url: `/pages/paySuccess/paySuccess?params=${JSON.stringify(params)}`
					});
				},
				fail: function (res) {
					// console.log(res,'2')
				},
				complete: function (res) {
					that.removeStorage();
					console.log(res, '3');
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 32rpx;
	font-size: 24rpx;
	padding-bottom: 160rpx;
	.cell {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		.addressBox {
			display: flex;
			justify-content: flex-start;
			width: 80%;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			.name {
				font-weight: 400;
				color: #999999;
				font-size: 24rpx;
			}
		}
		.service {
			width: 100%;
			font-size: 24rpx;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				color: #333;
				.desc {
					color: #f55726;
				}
			}
			.content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.left {
					display: flex;
					justify-content: flex-start;
					.picture {
						width: 130rpx;
						height: 130rpx;
						background: #f8f9fa;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.project {
						width: 65%;
						margin-left: 28rpx;
						.name {
							color: #333;
							font-size: 24rpx;
							font-weight: 500;
						}
						.desc {
							color: #666666;
							font-size: 22rpx;
						}
					}
				}
				.price {
					color: #f55726;
					font-size: 22rpx;
					span {
						font-weight: 500;
						font-size: 32rpx;
					}
				}
			}
		}
		.payBox {
			color: #666666;
			span {
				color: #f55726;
			}
		}
		.title {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
		.remarkBox {
			text-align: right;
			width: 70%;
			display: flex;
			justify-content: flex-end;
			.desc {
				margin-right: 20rpx;
				color: #999999;
			}
		}
		.agreement {
			display: flex;
			.desc {
				margin-right: 20rpx;
				color: #999999;
			}
		}
	}
	.bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		.btn {
			width: 178rpx;
			margin-left: 36rpx;
		}
		.price {
			font-size: 22rpx;
			span {
				font-size: 32rpx;
				font-weight: bold;
				color: #f55726;
			}
		}
	}
}
</style>